<template>
    <div class="share_wrapper">
        <div class="share_content" ref="shareContent">
            <img :src="backgroundSrc" alt="" ref="share" class="background">
            <div class="share">
                
                <div>
                    <div class="tit">世界卫生组织建议每天需要摄入25克膳食纤维</div>
                <div class="cirlce"></div>

                <div class="man">
                    <!-- <img src="http://file.rzkeji.com/web/f6_activity/person01.png" alt="" crossOrigin="Anonymous"> -->
                    <img :src="manSrc"  ref='man'>
                    <div class='num'>{{goals}}</div>
                </div>
                <div class="analysis" v-if="goals<25">
                    离每日标准还差 <span style="font-size:35px">{{appNum}}</span>个苹果
                </div>
                <div class="analysis" v-if="goals>25" style="padding:10px 0;">
                    恭喜你！今天达标了哦！
                </div>
                <div class="code">
                    <div>你也来<br>测一测</div>
                    <div>
                        <!-- <img src="http://file.rzkeji.com/web/f6_activity/code.jpg" alt="" crossOrigin="Anonymous"> -->
                        <img :src="codeSrc" alt="" ref="code">
                    </div>
                </div>
                </div>
            </div>
        </div>
        <div class="shareImg" v-if="dataURL">
                <img :src="dataURL" alt="" >
        </div>
    </div>
</template>
<script>
import {Toast} from 'vant';
import html2canvas from 'html2canvas';
export default {
    name:'share',
    data() {
        return {
            man:'http://file.rzkeji.com/web/f6_activity/person01.png',
            background:'http://file.rzkeji.com/web/f6_activity/beijing01.png',
            code:'http://file.rzkeji.com/web/f6_activity/code.jpg',
            goals:'0.0',
            appleGoals:1.3,
            appNum:'',
            dataURL:'',//生成的canvas图片
            manSrc:'',//转化后的base64图片
            backgroundSrc:'',
            codeSrc:'',
            flag:true
        }
    },
    computed: {
        shareBackground(){
            if(this.backgroundSrc){
                return {background:`url(${this.backgroundSrc})`}
            }
            
        }
    },
    methods:{
        toImage() {
                html2canvas(this.$refs.shareContent,{
                backgroundColor: null,
                useCORS: true, 
                taintTest: false
            }).then((canvas) => {
                let dataURL = canvas.toDataURL("image/png");
                this.dataURL = dataURL;
                Toast.clear();
            })
            
            // this.flag=false
        },
        convertImgToBase64(url, callback, outputFormat){//转化为base64
            var canvas = document.createElement('CANVAS'),
                ctx = canvas.getContext('2d'),
                img = new Image;
            img.crossOrigin = 'Anonymous';
            img.onload = function(){
                canvas.height = img.height;
                canvas.width = img.width;
                ctx.drawImage(img,0,0);
                var dataURL = canvas.toDataURL(outputFormat || 'image/png');
                callback.call(this, dataURL);
                canvas = null; 
            };
            img.src = url;

            }


    },
    mounted() {
        let _this=this
        const toast = Toast.loading({
        duration: 0, 
        mask:true,      // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '生成图片中'
      });
        if(this.$route.params.goals){
            this.goals=this.$route.params.goals.toFixed(1)
        }
        if(this.goals<25){
            this.appNum=Math.round((25-this.goals)/1.3)
        }
       _this.convertImgToBase64(this.man,function(base64Img){
           _this.manSrc=base64Img
       });
       _this.convertImgToBase64(this.background,function(base64Img){
           _this.backgroundSrc=base64Img
       });
       _this.convertImgToBase64(this.code,function(base64Img){
           _this.codeSrc=base64Img
       });

 
 
        // this.convertImgToBase64('http://file.rzkeji.com/web/f6_activity/person01.png', function(base64Img){
        // // document.getElementById('img').setAttribute( 'src',base64Img)
        // _this.manSrc=base64Img
        
        // });
        let p1 = new Promise((resolve, reject) => {
            _this.$refs.man.onload=function(){
                resolve()
            }
            })

        let p2 = new Promise((resolve, reject) => {
            _this.$refs.code.onload=function(){
                resolve()
            }
            })
        let p3 = new Promise((resolve, reject) => {
            _this.$refs.share.onload=function(){
                resolve()
            }
            })
        Promise.all([p1,p2,p3]).then((result) => {
        //    setTimeout(()=>{
                _this.toImage()
        //    },3000)
            }).catch((error) => {
            console.log(error)      // 失败了，打出 '失败'
            })

    },
}
</script>
<style lang="scss" scoped>
    .share_wrapper{
        width:100%;
        height:100%;
    }
    .background{
        z-index: 90;
        width: 100%;
        height: 100%;
        top:0;
        left:0;
        position: absolute;
    }
    .share_content{
        position: relative;
        width:100%;
        height: 100%;
    }
    .share{
        z-index: 999;
        width: 100%;
        height: 100%;
        top:0;
        // background:url(../../../static/img/beijing01.png);
        background-size:cover; 
        position: relative;
        overflow: hidden;
    }
    .tit{
        color:#eee;
        background:rgba(8, 13, 17,0.6);
        font-size: 30px;
        padding:20px 0;
    }
    .man{
        position: absolute;
        width:100%;
        bottom: -10px;
        img{
            width: 80%;
        }
        .num{
            color:#eee;
            top:260px;
            left: 34%;
            font-size: 110px;
            position: absolute;
        }
    }
    .analysis{
        width: 100%;
        position: absolute;
        font-size: 30px;
        background: rgba(151, 103, 116,0.8);
        color:#eee;
        top: 55%;
    }
    .code{
        position: absolute;
        font-size: 50px;
        color:#eee;
        background: rgba(26, 42, 56,0.8);
        padding:10px;
        right: 30px;
        bottom: 30px;
        img{
            width: 180px;
        }
    }
    .shareImg{
        position:absolute;
        top:0px;
        left: 0%;
        width:100%;
        height:100%;
        z-index:1000;
        img{
            width:100%;
        }
    }
</style>
